<template>
  <div class="bigbox">
    <div class="topbox">
      <div class="libox">
        <ul>
          <li><i class="a-icon-back" @click="$router.go(-1)">返回</i></li>
          <li>添加企业</li>
        </ul>
      </div>
      <span>黑马管理员</span>
    </div>
    <div class="centerbox">
      <a-card style="box-shadow: none">
        <div class="qiyexinix">企业信息</div>
        <div class="formbox">
          <a-form @finish="finished" ref="formRef" layout="horizontal" :model="params">
            <a-row :gutter="24">
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item
                  name="name"
                  :rules="[{ required: true, message: '企业名称不能为空', trigger: 'blur' }]"
                  label="企业名称"
                  label-width="100px"
                >
                  <a-input
                    v-model:value="params.name"
                    placeholder="请输入企业名称"
                    style="width: 60%"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item
                  name="legalPerson"
                  :rules="[{ required: true, message: '法人不能为空', trigger: 'blur' }]"
                  label="法人"
                  label-width="100px"
                >
                  <a-input
                    v-model:value="params.legalPerson"
                    placeholder="请输入法人"
                    style="width: 60%"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item
                  name="registeredAddress"
                  :rules="[{ required: true, message: '注册地址不能为空', trigger: 'blur' }]"
                  label="注册地址"
                  label-width="100px"
                >
                  <a-input
                    v-model:value="params.registeredAddress"
                    placeholder="请输入注册地址"
                    style="width: 60%"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item
                  label="所在行业"
                  name="industryCode"
                  :rules="[{ required: true, message: '所在行业不能为空', trigger: 'change' }]"
                  label-width="100px"
                >
                  <a-select
                    ref="select"
                    v-model:value="params.industryCode"
                    placeholder="请输入所在行业"
                    style="width: 60%"
                    @focus="focus"
                  >
                    <a-select-option
                      v-for="item in Industryoptoions"
                      :key="item.industryCode"
                      :value="item.industryCode"
                      :label="item.industryName"
                    >
                      {{ item.industryName }}</a-select-option
                    >
                    <!-- <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option> -->
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item
                  name="businessLicenseUrl"
                  :rules="[{ required: true, message: '营业执照不能为空', trigger: 'blur' }]"
                  label="营业执照"
                  label-width="100px"
                >
                  <a-upload v-model:value="params.businessLicenseUrl" :beforeUpload="handleupload">
                    <a-button size="small" type="primary" plain class="a-icon-upload"
                      >点击上传</a-button
                    >
                    <div class="a-upload__tip">支持扩展名：.png .jpg .jpeg，文件大小不得超过5M</div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <div class="buttombox">
                <a-form-item>
                  <a-row justify="center">
                    <a-space>
                      <a-button disabled="">重置</a-button>
                      <a-button type="primary" html-type="submit">确定</a-button>
                    </a-space>
                  </a-row>
                </a-form-item>
              </div>
            </a-row>
          </a-form>
        </div>
      </a-card>

      <a-card style="box-shadow: none; margin: 20px 0">
        <div class="qiyexinix">联系人信息</div>
        <div class="formbox">
          <a-form ref="formRef" :model="params">
            <a-row :gutter="24">
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item
                  name="contact"
                  :rules="[{ required: true, message: '企业联系人不能为空', trigger: 'blur' }]"
                  label="企业联系人"
                  label-width="100px"
                >
                  <a-input v-model:value="params.contact" placeholder="请输入企业联系人" />
                </a-form-item>
              </a-col>
              <a-col :span="11" style="margin-right: 20px">
                <a-form-item
                  name="contactNumber"
                  :rules="[{ required: true, message: '联系电话不能为空', trigger: 'blur' }]"
                  label="联系电话"
                  label-width="100px"
                >
                  <a-input v-model:value="params.contactNumber" placeholder="请输入联系电话" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getEnterpById, getEnterprIndustry, uploadUrl, fixEnterp } from '@/api/businessman.js'
import { message } from 'ant-design-vue'
// import { , uploadUrl } from '@/api/businessman.js' // uploadUrl
const router = useRouter()
const params = ref({
  businessLicenseId: null,
  businessLicenseUrl: '',
  contact: '',
  contactNumber: '',
  industryCode: null,
  legalPerson: '',
  name: '',
  registeredAddress: ''
})
const route = useRoute()
const Industryoptoions = ref(null)
const fileList = ref([])
const formRef = ref(null)
///////////////////////////////////////////////////
////////////////////这里写方法//////////////////////
///////////////////////////////////////////////////
onMounted(() => {
  getEIndustry()
  getEnterpInfo()
})

const finished = async (value) => {
  console.log(value)
  if (params.value.contact && params.value.contactNumber) {
    delete params.value.businessLicenseName
    delete params.value.industryName
    delete params.value.rent
    const res = await fixEnterp(params.value)
    console.log(res)
    message.success('编辑成功')
    router.back()
  } else {
    message.error('你有必填项未填,请检查表单')
  }
}
const getEnterpInfo = async () => {
  const res = await getEnterpById(route.params.id)
  console.log(res)
  params.value = { ...res.data }

  console.log(params)
}

const handleupload = async (file) => {
  console.log(file)
  try {
    fileList.value = file

    const formdata = new FormData()
    formdata.append('file', file)
    formdata.append('type', 'businessLicense')
    const res = await uploadUrl(formdata)
    console.log(res)
    params.value.businessLicenseUrl = res.data.url
  } catch (error) {
    console.log(error)
    return Promise.reject()
  }
}
const getEIndustry = async () => {
  const res = await getEnterprIndustry()
  console.log(res)
  Industryoptoions.value = res.data
}
</script>

<style scoped lang="less">
.bigbox {
  height: 100vh;
  width: 100vw;
  background-color: #f4f6f8;
}
.topbox {
  width: 100vw;
  height: 50px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
  color: #262626;
}
ul {
  display: flex;
}
li:first-child {
  padding-right: 10px;
  border-right: 1px solid #d8d8d8;
  // background-color: pink;
}
li:last-child {
  margin-left: 10px;
}
.centerbox {
  margin: 20px auto;
  width: 85vw;
}
.a-card {
  margin: 30px 0;
}
.qiyexinix {
  margin-top: 20px;
  margin-bottom: 40px;
  padding-left: 10px;
  border-left: 2px solid #4770ff;
}
::v-deep .a-card__body {
  padding: 0px;
}
.formbox {
  margin: 0px auto;
  width: 70vw;
  // height: 50vh;
  background-color: #fff;
  margin-bottom: 40px;
}
.a-upload__tip {
  margin-top: 5px;
  color: #8c8c8c;
}
.buttombox {
  width: 100%;
  height: 10vh;
  left: 0px;
  position: fixed;
  bottom: 0;
}
</style>
